<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品秒杀</title>
    <script src="../static/static/vue.min.js"></script>
    <script src="../static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="../static/lib-master/theme-chalk/index.css" />
    <script src="../static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <span style="font-size: 30px; color: red; font-weight: bolder;" :hidden="seckillDateHidden">秒杀倒计时: {{ hours
            }}:{{ minutes }}:{{ seconds }}</span>
        <el-form :model="orderInfo" label-width="150px">
            <el-form-item label="用户id" prop="userId">
                <span>{{orderInfo.userId}}</span>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName">
                <span>{{orderInfo.goodsName}}</span>
            </el-form-item>
            <el-form-item label="商品图片">
                <img :src="shopSeckillVo.goodsImg" width="150px" height="150px">
            </el-form-item>
            <el-form-item label="商品标题">
                <span>{{shopSeckillVo.goodsTitle}}</span>
            </el-form-item>
            <el-form-item label="商品详情">
                <span>{{shopSeckillVo.goodsDetail}}</span>
            </el-form-item>
            <el-form-item label="开始时间">
                <span>{{shopSeckillVo.startDate}}</span>
            </el-form-item>
            <el-form-item label="结束时间">
                <span>{{shopSeckillVo.endDate}}</span>
            </el-form-item>
            <el-form-item label="商品数量" prop="goodsCount">
                <span>{{orderInfo.goodsCount}}</span>
            </el-form-item>
            <el-form-item label="商品单价" prop="goodsPrice">
                <span>{{orderInfo.goodsPrice}}</span>
            </el-form-item>
            <el-form-item label="收获地址id" prop="deliveryAddrId">
                <el-input v-model="orderInfo.deliveryAddrId" placeholder="收获地址id" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="订单创建时间">
                <!-- <el-date-picker v-model="orderInfo.createDate" type="datetime" placeholder="选择日期时间">
                </el-date-picker> -->
                <span>{{orderInfo.createDate}}</span>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
                <!-- <el-input placeholder="订单状态：0新建未支付，1已支付，2已发货，3已收货，4已退款，5已完成"></el-input> -->
                <span v-if="orderInfo.status == 0">新建未支付</span>
                <span v-if="orderInfo.status == 1">已支付</span>
                <span v-if="orderInfo.status == 2">已发货</span>
                <span v-if="orderInfo.status == 3">已收货</span>
                <span v-if="orderInfo.status == 4">已退款</span>
                <span v-if="orderInfo.status == 5">已完成</span>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="history.back(-1)">返回</el-button>
            <el-button type="primary" @click="orderInfoSubmit()" :disabled="payFlag">{{payButton}}</el-button>
        </span>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                payButton: "支付",
                seckillDateHidden: false,
                payFlag: false,
                userId: '',
                baseUrl: "http://localhost:88/api",
                orderInfo: {
                    id: 0,
                    userId: '',
                    goodsId: '',
                    deliveryAddrId: '',
                    goodsName: '',
                    goodsCount: '',
                    goodsPrice: '',
                    goodsChannel: '1',
                    status: 0,
                    createDate: '',
                    payDate: ''
                },
                shopSeckillVo: {},
                // 秒杀倒计时
                end_date: "", // 截止时间
                days: 0,
                hours: 0,
                minutes: 0,
                seconds: 0,
                residue: 0,
            }
        },
        watch: {
            // 'seconds'(newValue) {
            //     if (newValue == "00" && this.minutes == "00" && this.hours == "00") {
            //         this.end_date = this.shopSeckillVo.endDate;
            //         this.seckillDateHidden = true;
            //         this.payFlag = false;
            //     } else if (!(newValue + '').includes("-")) {
            //         this.seckillDateHidden = false;
            //         this.payFlag = false;
            //     } else {
            //         this.payFlag = true;
            //         this.seckillDateHidden = true;
            //         this.payButton = "抢购结束";
            //     }
            // }

            // 'seconds' (newValue) {
            //     let time_1 = new Date(this.end_date);
            //     let time_2 = new Date(this.end_date);
            // }
        },
        created() {
            if (localStorage.getItem("userId")) this.userId = localStorage.getItem("userId")
            this.getRequestParam()
            this.seckillByGoodsId()
            setInterval(() => {
                this.getResidueDate();
            }, 1000);
            this.timeDefault();
        },
        methods: {
            seckillByGoodsId() {
                axios.get(`${this.baseUrl}/goods/seckillactivity/seckillByGoodsId?goodsId=${this.orderInfo.goodsId}`).then(({ data }) => {
                    this.end_date = data.startDate
                    this.shopSeckillVo = data
                    this.orderInfo.userId = this.userId
                    this.orderInfo.goodsName = data.goodsName
                    this.orderInfo.goodsCount = data.stockCount
                    this.orderInfo.goodsPrice = data.seckillPrice
                })
            },
            // 获取路径传的参数
            getRequestParam() {
                var url = location.search //获取url中"?"符后的字串 ('?modFlag=business&role=1')
                var theRequest = new Object()
                if (url.indexOf('?') != -1) {
                    var str = url.substr(1) //substr()方法返回从参数值开始到结束的字符串；
                    var strs = str.split('&')
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
                    }
                    // console.log(theRequest) //此时的theRequest就是我们需要的参数；
                    this.orderInfo.goodsId = theRequest.goodsId
                }
            },
            // 秒杀倒计时
            getResidueDate() {
                this.residue = new Date(this.end_date).getTime() - new Date();
                this.days = this.addZero(
                    Math.floor(this.residue / 1000 / 60 / 60 / 24)
                ); //天
                this.hours = this.addZero(
                    Math.floor((this.residue / 1000 / 60 / 60) % 24)
                ); //时
                this.minutes = this.addZero(
                    Math.floor((this.residue / 1000 / 60) % 60)
                ); //分
                this.seconds = this.addZero(Math.floor((this.residue / 1000) % 60)); //秒
            },
            start() {
                // let _this = this;
            },
            addZero(d) {
                return parseInt(d) < 10 ? "0" + d : d;
            },
            // 表单提交
            orderInfoSubmit() {
                console.log(this.orderInfo);
                axios.post(`${this.baseUrl}/user/orderinfo/save`, this.orderInfo).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                const div = document.createElement('divform');
                                div.innerHTML = data.result; // data就是接口返回的form 表单字符串
                                document.body.appendChild(div);
                                let len = document.forms.length - 1
                                document.forms[len].setAttribute('target', '_blank') // 新开窗口跳转
                                document.forms[len].submit();
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            // 默认时间
            timeDefault() {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
                this.orderInfo.createDate = this.gettime
                console.log(this.orderInfo.createDate);
            }
        },
    })
</script>

</html>